.componentCompareContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.top {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 16px 24px;
}

.bottom {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  flex: 1;

  &.hidden {
    display: none;
  }
  // padding-bottom: 16px;
}

.navContainer {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
  font-size: var(--bit-p-xs, 14px);
  padding-left: 8px;
}

.navigation {
  display: flex;
  min-height: 48px;
  align-items: center;

  @media screen and (max-width: 768px) {
    padding-left: 6px;
  }

  > li {
    display: block;
    margin-right: 16px;
    height: 100%;
  }
}

.loader {
  padding: 16px 24px;
  color: var(--bit-bg-dent, #f6f6f6);
}

.tabLoader {
  color: var(--bit-bg-dent, #f6f6f6);
}

.compareLoader {
  display: flex;
  padding-top: 16px;
}

.compareSidebarLoader {
  width: 30%;
}

.compareViewLoader {
  width: 70%;
  padding-right: 16px;
}

.activeNav {
  > div {
    color: var(--bit-accent-color, #6c5ce7);
    border-radius: 5px;
    background-color: var(--bit-accent-bg, #edebfc);
  }

  &:after {
    // unset default selection styles
    height: 0 !important;
  }
}

.loadingNav {
  // > div {
  //   color: var(--bit-accent-color, #6c5ce7);
  //   border-radius: 5px;
  //   background-color: var(--bit-accent-bg, #edebfc);
  // }

  &:after {
    // unset default selection styles
    height: 0 !important;
  }
}

.navItem {
  position: relative;
  color: var(--bit-text-color-light, #707279);

  &.none {
    > div {
      opacity: 65%;
    }
  }
}

.compareMenuTab {
  position: relative;
}

.indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  border-radius: 100%;
  padding: 4px;
  box-sizing: border-box;

  &.hasChanged {
    background-color: #ff8b00;
  }

  &.new {
    // @todo - review styles
    display: none;
    background-color: var(--bit-accent-success-color, #37b26c);
  }
}
